<template>
	<view class="content">
		<global-contact></global-contact>
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="header header-top-h5">
				<!-- #endif -->
				<view class="head">
					<!-- <image style="width: 30rpx;height: 30rpx;" src="https://www.atuanjian.com/appletStatic/static/local.png" mode=""></image>
					<view class="local" @click="chooseCity()">
						<text>{{currentCity.lastIndexOf('市')?currentCity.replace(/市/,""):currentCity}}</text>
						<view class="trang"></view>
					</view> -->
					<image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png"
						mode="aspectFit"></image>
					<view class="search">
						<u-search @search="search()" placeholder="户外拓展/团建/骑行" :showAction="false"
							v-model="keyword"></u-search>
					</view>
					<u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
					<image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png"
						mode="aspectFit"></image>
				</view>
			</view>
			<view class="list" v-if="list.length>0">
				<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
					<image :src="showImg+item.img" mode=""></image>
					<view class="info">
						<view class="title">{{item.title}}</view>
						<scroll-view scroll-x="true" class="scroll" v-if="item.abstract">
							<view class="mark">
								<text v-for="(item1,index1) in item.abstract.split(',')" :key="index1">{{item1}}</text>
							</view>
						</scroll-view>
						<view class="system">
							<view class="left">
								<text>{{item.day_num}}</text>
								<u-line direction="col" length="20rpx" margin="0 12rpx 0 14rpx;"
									color="#888888"></u-line>
								<text>{{item.people_num}}</text>
							</view>
							<view class="right">
								<text><text>{{item.people_price}}</text>{{item.people_price_unit||''}}</text>
							</view>
						</view>
						<view class="num">
							<text class="left">{{item.catname}}</text>
							<text class="right">{{item.capita||''}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-else>
				<u-empty mode="list" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>

			<u-picker :show="showSort" keyName="label" :columns="sortList" @cancel="cancelSort"
				@confirm="confirmSort"></u-picker>
			<tabBar current='0'></tabBar>
		</view>
</template>

<script>
	import tabBar from '@/components/tabBar.vue'
	import {
		getyouth,
		siteSetting
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				keyword: '',
				showImg: '',
				list: [],
				page: 0,
				totalPage: 1,
				catid: 3,
				priceSort: '',
				showCity: false,
				cityList: [],
				currentCity: uni.getStorageSync('webAddress'),
				showSort: false,
				sortList: [
					[{
						label: '推荐排序',
						value: ''
					}, {
						label: '价格低到高',
						value: 'asc'
					}, {
						label: '价格高到低',
						value: 'desc'
					}]
				],
				catId: '',
				uEmptyText: '数据加载中...',
			}
		},
		components: {
			tabBar
		},
		methods: {
			changeSort() {
				this.showSort = true
			},
			cancelSort() {
				this.showSort = false
			},
			confirmSort(e) {
				this.priceSort = e.value[0].value
				this.showSort = false
				this.page = 0
				this.list = []
				this.getList()
			},
			async siteSetting() {
				return await siteSetting()
			},
			cancel1() {
				this.showCity = false
			},
			confirm1(event) {
				uni.setStorageSync('webAddress', event.value[0])
				this.currentCity = event.value[0]
				this.showCity = false
				this.page = 0
				this.list = []
				this.getList()
			},
			getSetting() {
				this.siteSetting().then(res => {
					uni.setStorageSync('webAddress', res.default_substation)
					// this.currentCity=res.default_substation
					if (res.city && res.city.length > 0) {
						this.cityList.push(res.city)
					}
					// this.defaultMethods()
				})
			},
			async getyouth(data) {
				return await getyouth(data)
			},
			getList() {
				console.log('搜索关键字', this.keyword)
				let data = {
					catid: this.catid,
					p: this.page,
					n: 10,
					typeId: this.catId, //筛选分类字符串分割id ??????
					search: this.keyword,
					priceSort: this.priceSort
				}
				this.getyouth(data).then(res => {
					if (res.count < 1) {
						this.$data.uEmptyText = '暂无数据';
						return false;
					}
					this.list = [...this.list, ...res.list]
					this.totalPage = Math.ceil(res.count / 10)
					// console.log(this.category)
				}).catch(err => {
					console.log(err)
				})
			},
			chooseCity() {
				this.showCity = true
				// uni.showToast({
				// 	icon:'loading',
				// 	title:'正在研发中...'
				// })
			},
			search() {
				if (!this.keyword.trim()) {
					uni.showToast({
						icon: 'none',
						title: '请输入关键词'
					})
					return;
				}
				this.catId = ''
				this.list = []
				this.page = 0

				// #ifdef H5
				var redirectToUrl = this.$route.fullPath;
				if (this.$route.query['search']) {
					// console.log(this.$route.query['search'])
					redirectToUrl = redirectToUrl.replace('search='+this.$route.query['search'], 'search='+this.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&search=${this.keyword}`; // 携带参数
				}
				if (this.$route.query['keywords']) {
					redirectToUrl = redirectToUrl.replace('keywords='+this.$route.query['keywords'], 'keywords='+this.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&keywords=${this.keyword}`; // 携带参数
				}
				uni.redirectTo({
					url: redirectToUrl
				});
				// #endif
				// #ifdef MP-WEIXIN
				this.getList();
				// #endif
			},
			// changeSort(){
			// 	// uni.showToast({
			// 	// 	icon:'loading',
			// 	// 	title:'正在研发中...'
			// 	// })
			// 	if(this.priceSort==''){
			// 		this.priceSort='desc'
			// 	}else if(this.priceSort=='desc'){
			// 		this.priceSort='asc'
			// 	}else{
			// 		this.priceSort='desc'
			// 	}
			// 	console.log('当前模式',this.priceSort)
			// 	this.page=0
			// 	this.list=[]
			// 	this.getList()
			// },
			filtrate() {
				// uni.setStorageSync('mark_id',this.catid)
				uni.navigateTo({
					url: '/pagesB/annualMeeting/filtrate?categoryId=' + this.catid + '&typeId=' + this.catId
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pagesA/detail/product?id=${item.id}&type=5`
				})
			}
		},
		onLoad(option) {
			console.log('产品', option)
			this.showImg = this.$config.showImgApi;
			if (option.id) {
				this.catid = option.id
				this.catId = uni.getStorageSync(option.id)
			}
			if (option.typeId) {
				this.catId = option.typeId
			}
			if (option.keywords) {
				this.keyword = option.keywords
			}
			if (option.title_text) {
				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: option.title_text // 自定义标题内容
				})
			}
		},
		onShow() {
			let option;
			// #ifdef H5
			option = this.options;
			// #endif
			// #ifdef MP-WEIXIN
			option = this.$mp.query;
			// #endif
			if (option && option.id && uni.getStorageSync(option.id)) {
				this.catId = uni.getStorageSync(option.id);
				if (!option.typeId) {
					// #ifdef H5
					const newUrl = location.href + `&typeId=${this.catId}`;
					history.pushState({}, null, newUrl);
					// #endif
					// #ifdef MP-WEIXIN
					const newUrl = this.$mp.page.$page.fullPath + `&typeId=${this.catId}`;
					this.newUrl = newUrl;
					// #endif
				} else {
					// #ifdef H5
					const includeQuestion = location.href.includes('?');
					let url = includeQuestion ? location.href.split('?')[0] : location.href;
					const newUrl = url + `?id=${option.id}&typeId=${this.catId}`;
					history.pushState({}, null, newUrl);
					// #endif
				}
				uni.removeStorageSync(option.id);
			} else if (option && option.typeId) {
				this.catId = option.typeId;
			}
			this.page = 0
			this.list = [];
			this.getList();
			// if(uni.getStorageSync('goods')){
			// 	// this.keyword=JSON.parse(uni.getStorageSync('goods'))[0].text
			// 	let arr=JSON.parse(uni.getStorageSync('goods'))
			// 	// catId
			// 	let arrid=[]
			// 	arr.forEach(val=>{
			// 		arrid.push(val.id)
			// 	})
			// 	if (this.options && this.options.typeId) {
			// 		this.catId = this.options.typeId
			// 	} else if (this.options && this.options.id && uni.getStorageSync(this.options.id)) {
			// 		this.catId = uni.getStorageSync(this.options.id)
			// 	} else {
			// 		this.catId=arrid.join(',');
			// 	}
			// 	this.page=0
			// 	this.list=[]
			// 	this.getList()
			// 	uni.removeStorageSync('goods')
			// }
		},
		onReachBottom() {
			if (this.page < this.totalPage - 1) {
				this.page++
				this.getList();
			}
		},
		onShareAppMessage() {
			return {
				title: '西安蚂蚁团建',
				path: this.newUrl
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.header {
		background: #FFB850;
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;

		.head {
			@include flex_style(space-between, center, row nowrap);
			padding: 16rpx 22rpx 16rpx 30rpx;

			.local {
				@include flex_style(flex-start, center, row nowrap);

				text {
					display: block;
					max-width: 85rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 38rpx;
					color: #FFFFFF;
				}

				.trang {
					width: 0;
					height: 0;
					border-left: 7rpx solid transparent;
					border-right: 7rpx solid transparent;
					border-top: 10rpx solid #FFFFFF;
					margin-left: 8rpx;
				}
			}

			.search {
				flex: 1;
				height: 56rpx;

				::v-deep.u-search__content {
					background-color: #F5F5F5 !important;
					border-width: 0;
				}

				::v-deep.u-search__content__input {
					height: 56rpx !important;
					background-color: #F5F5F5 !important;
					border-width: 0;
				}
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}

		}
	}

	.list {
		padding: 88rpx 30rpx 0;

		.item {
			@include flex_style(space-between, center, row nowrap);
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F5F5F5;

			image {
				width: 256rpx;
				height: 208rpx;
				border-radius: 8rpx;
			}

			.info {
				.title {
					width: 416rpx;
					height: 76rpx;
					@include word_over(2);
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 38rpx;
					color: #1A1A1A;
					margin-bottom: 6rpx;
				}

				.scroll {
					width: 416rpx;
					margin-bottom: 8rpx;

					// height: 36rpx;
					.mark {
						height: 36rpx;
						@include flex_style(flex-start, center, row nowrap);
						white-space: nowrap;

						text {
							padding: 0 8rpx;
							line-height: 36rpx;
							background: rgba(245, 245, 245, 0.39);
							margin-right: 8rpx;
							border-radius: 4rpx;
							font-size: 22rpx;
							font-family: 苹方-简;
							font-weight: normal;
							color: #666666;
						}
					}
				}

				.system {
					@include flex_style(space-between, center, row nowrap);
					margin-bottom: 12rpx;

					.left {
						@include flex_style(flex-start, center, row nowrap);

						text {
							font-size: 24rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 32rpx;
							color: #888888;
						}
					}

					.right {
						text {
							font-size: 20rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 28rpx;
							color: #888888;

							text {
								font-size: 28rpx;
								line-height: 40rpx;
								color: #FF5E00;
							}
						}
					}
				}

				.num {
					@include flex_style(space-between, center, row nowrap);

					.left {
						font-size: 24rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 32rpx;
						color: #666666;
					}

					.right {
						font-size: 24rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 32rpx;
						color: #BDBDBD;
					}
				}
			}
		}

		.item:last-child {
			border-bottom: none;
		}
	}
</style>